<template>
	<view>
		<view class="detail-top-bar">
			<view class="store-name" @click="toStoreInfo">
				{{store.name}}
				<uni-icons color="#fff" type="arrowright"></uni-icons>
			</view>
			<view class="store-num">
				<text>评分：{{store.score}}</text>
				<text style="margin-left:40rpx;">粉丝数：{{store.fansNum}}</text>
			</view>
			<view class="favors" @click="favors">
				<text v-if="!inFavors" style="position: relative;bottom: 2rpx;">关注</text>
				<uni-icons v-else type="checkmarkempty" size="20" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="swiper-controll">
			<view @click="select(index)" v-for="(item,index) in swiperControll" :key="index" :class="(nowSelectIndex === index)?'item_select':'item'">
				<text :class="(nowSelectIndex === index)?'text_select':'text'">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "store-detail-top",
		props: {
			store: {
				type: Object,
				default () {
					return {}
				}
			},
			nowSelectSwiper:{
				type:Number
			}
		},
		data() {
			return {
				inFavors: false,
				swiperControll:["推荐","全部"],
				nowSelectIndex:0,
				nowUser:{},
			};
		},
		created() {
			this.nowUser = uni.getStorageSync("user")
			this.setFavorsView()
		},
		watch:{
			nowSelectSwiper(v){
				this.nowSelectIndex = v
			}
		},
		methods: {
			toStoreInfo() {
				uni.navigateTo({
					url:"/pages/store-info/store-info?id="+this.store.id
				})
			},
			setFavorsView(){
				if(this.findUserFollowIndex(this.nowUser) !== -1){
					this.inFavors = true
				}else{
					this.inFavors = false
				}	
			},
			findUserFollowIndex(user){
				return user.followStoreList.indexOf(this.store.id)
			},
			favors() {
				var user = this.nowUser
				//将商店id删除或添加至user的关注列表
				var index = this.findUserFollowIndex(user)
				var mode = 0;
				if(index != -1){
					//已关注
					var index = this.findUserFollowIndex(user)
					user.followStoreList.splice(index,1)
					mode = 1
					console.log(user);
				}else{
					//未关注
					user.followStoreList.push(this.store.id)
					console.log(user);
					mode = 0
				}
				var vue = this
				//更新user
				this.$request("user/register",user,function(res){
					var newUser = res.data.data[0]
					vue.nowUser = newUser
					uni.setStorageSync("user",vue.nowUser)
					
					//更新店铺粉丝数
					var newStore = vue.store;
					(mode == 0)?(newStore.fansNum++):(newStore.fansNum--)
					vue.$request("store/add",newStore,(res)=>{
						console.log(res.data);
						vue.setFavorsView()
					})
				})
			},
			select(index){
				this.nowSelectIndex = index
				this.$emit("select",index)
			}
		}
	}
</script>

<style lang="scss">
	.detail-top-bar {
		//border: 2rpx red solid;
		width: 100%;
		height: 110rpx;
		background-color: $my-main-color;
		display: flex;
		flex-direction: column;
		position: relative;

		.favors {
			position: absolute;
			width: 120rpx;
			height: 50rpx;
			right: 20rpx;
			bottom: 10rpx;
			font-size: 28rpx;
			color: #fff;
			//border: #fff 2rpx solid;
			background-color: #f06347;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.store-name {
			color: #fff;
			font-weight: bold;
			font-size: 34rpx;
			margin: 0 0 0 20rpx;
		}

		.store-num {
			margin: 0 0 0 20rpx;

			text {
				color: #Fff;
				font-size: 28rpx;
			}
		}
	}

	.swiper-controll {
		height: 50rpx;
		background-color: $my-main-color;
		display: flex;
		flex-direction: row;

		.item {
			flex-grow: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		
			.text{
				position: relative;
				bottom: 8rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
		
		.item_select {
			flex-grow: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-bottom: 4rpx #fff solid;
		
			.text_select{
				position: relative;
				bottom: 8rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #fff;
			}
		}
	}
</style>
